<template>
	<view class="detail" :class="top==2?'m':''">
		<u-navbar v-show="top==1" :safeAreaInsetTop="false" :autoBack="true">
			<view class="u-nav-slot" slot="left">
				<view class="top-icon">
					<text class="iconfont icon-fanhui"></text>
				</view>
			</view>
			<view class="nav-r-slot" slot="right">
				<view class="top-icon">
					<text class="iconfont icon-fenxiang1"></text>
				</view>
				<view class="top-icon">
					<text class="iconfont icon-gengduo"></text>
				</view>
			</view>
		</u-navbar>

		<view class="header" v-show="top==2">
			<view class="header_item">
				<text class="iconfont icon-fanhui"></text>
			</view>
			<view class="header_item">
				<view :class="a==1?'act':''">
					商品
				</view>
				<view :class="a==2?'act':''">
					评价
				</view>
				<view :class="a==3?'act':''">
					详情
				</view>
			</view>
			<view class="header_item">
				<text class="iconfont icon-gengduo"></text>
			</view>
		</view>


		<u-swiper :list="list" :circular="true" :height="375" @change="e => currentNum = e.current" :autoplay="false"
			indicatorStyle="right: 20px">
			<view slot="indicator" class="indicator-num">
				<text class="indicator-num__text">{{ currentNum + 1 }}/{{ list.length }}</text>
			</view>
		</u-swiper>

		<view class="detail_top">
			<view class="price">
				<text>￥ <text class="i">{{detail.price+'.00'}}</text> </text>
			</view>
			<view class="title">
				<text>{{detail.title}}</text>
			</view>
		</view>

		<view class="select">
			<view class="item">
				<text>已选</text> <text>{{detail.cate+'1个'}}</text>
			</view>
			<view class="item">
				<text>送至</text> <text>北京朝阳区三环到四环之间</text>
			</view>
			<view class="item">
				<text>品牌</text> <text>{{detail.brand}}</text>
			</view>
			<view class="item">
				<text>产地</text> <text>{{detail.origin}}</text>
			</view>
			<view class="item">
				<text>产地</text> <text>{{detail.origin}}</text>
			</view>
			<view class="item">
				<text>产地</text> <text>{{detail.origin}}</text>
			</view>
			<view class="item">
				<text>产地</text> <text>{{detail.origin}}</text>
			</view>
		</view>


		<view class="footer">
			<view class="origin footer_item">
				<text class="iconfont icon-xihuan1"></text>
				<text>收藏</text>
			</view>
			<view class="shopping_cart footer_item" @click="navTo('/pages/detail/cart/cart')">
				<text class="iconfont icon-gouwuche"></text>
				<text>购物车</text>
			</view>
			<view class="buy">
				<u-button type="primary" color="linear-gradient(135deg,#f2140c,#f2270c 70%,#f24d0c)" shape="circle"
					size="large " text="立即购买" @click="buy"></u-button>

			</view>
			<view class="add_cart">
				<u-button type="primary" 
				color="linear-gradient(135deg,#ffba0d,#ffc30d 69%,#ffcf0d)"
				 shape="circle"
				 @click="addCart"
					size="large " text="加入购物车"></u-button>
			</view>

		</view>

<!-- 		<u-popup :show="popupShow" @close="close" @open="open" closeable >
			<view class="popupBox">
				<view>
					<text>{{detail.title}}</text>
				</view>
				
				   <view>
					   
					   	<u-number-box v-model="value" @change="valChange"></u-number-box>
				   </view>
				
			</view>
		</u-popup> -->



	</view>
</template>

<script>
	import {
		get_detail,add_cart
	} from "@/api/shop.js"
	export default {
		data() {
			return {
				a: 1,
				bgColor1: '#ffffff',
				top: 2,
				id: '',
				list: [],
				detail: [],
				currentNum: 0,
				popupShow: false, //  弹出层的显示隐藏
			}
		},
		onPageScroll(e) {
			if (e.scrollTop > 60) {
				this.top = 2
			} else if (e.scrollTop < 60) {
				this.top = 1
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getGoods_dtail()
		},
		methods: {
			open() {
				console.log('open');
			},
			close() {
				this.popupShow = false
				console.log('close');
			},
			// addCart
			addCart(){
				  add_cart(this.id) 
				   .then(res=>{
					   if(res.code==200){
						   uni.showToast({
						   	title:res.msg
						   })
					   }
				   })
				   
			},
			getGoods_dtail() {
				let {
					id
				} = this
				get_detail(id).then(res => {
					console.log(res)
					if (res.code == 200) {
						res.data.imgUrl.forEach((v) => {
							v.type = 'image'
						})
						this.detail = res.data
						this.list = res.data.imgUrl


						console.log(this.list)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}

	.m {
		padding-top: 80rpx;
	}

	.header {
		position: fixed;
		z-index: 100;
		top: 0;
		left: 0;
		right: 0;
		background-color: #FFFFFF;
		width: 750rpx;
		box-sizing: border-box;
		padding: 0 26rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.header_item:nth-child(1) {
			font-size: 20px;
		}

		.header_item:nth-child(2) {
			padding: 10rpx 0;

			width: 50%;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.header_item:nth-child(3) {
			font-size: 20px;
		}
	}

	.act {
		border-bottom: 3px solid #3DA7FB;
	}

	.detail {
		padding-bottom: 200rpx;
		background-color: #f2f2f2 !important;
		width: 750rpx;
		height: 100vh;
	}

	::v-deep .nav-r-slot {
		display: flex;
		align-items: center;
	}

	::v-deep .u-navbar__content {
		background: rgba(255, 255, 255, 0) !important;
	}

	.detail_top {
		background-color: #FFFFFF;
		width: 750rpx;
		padding: 36rpx;
		box-sizing: border-box;
		border-radius: 0 0 24rpx 24rpx;

		.price {

			font-size: 16px;
			color: #f2270c;

			.i {
				font-size: 30px;
				font-family: '思源宋体 CN VF Regular';
			}
		}

		.title {
			font-weight: 700;
			margin-right: 5px;
		}
	}

	.select {
		border-radius: 24rpx;
		background-color: #FFFFFF;
		margin-top: 24rpx;
		padding: 20rpx 36rpx;

		.item {
			margin-top: 10rpx;

			text:nth-child(1) {
				font-family: '思源宋体 CN VF Regular';
				font-weight: 700;
				font-size: 14px;
			}

			text:nth-child(2) {
				margin-left: 20rpx;
				font-size: 14px;
			}
		}
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 750rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.footer_item {
			text-align: center;

			.iconfont {
				font-size: 20px;
				font-weight: 500;
			}

			text:nth-child(2) {
				font-size: 9px;
				display: block;
				margin-top: 16rpx;
			}
		}

		.add_cart,
		.buy {
			width: 30%;
		}
	}

	.top-icon {
		margin-right: 10rpx;
		text-align: center;
		width: 60rpx;
		height: 60rpx;
		background-color: rgba(0, 0, 0, 0.5);
		border-radius: 50%;
		box-sizing: border-box;
		padding: 10rpx 0;

		.iconfont {
			font-size: 18px;
			color: #fff;
		}
	}
	
	.popupBox{
		padding: 20rpx ;
	}
</style>
